<script setup lang="ts">
import dayjs from "dayjs";
import customerEditForm from "@/components/customerEdit/index.vue";
import tagAddForm from "@/components/tagAdd/index.vue";
import followForm from "@/components/followHandle/index.vue";
import dealForm from "@/components/dealHandle/index.vue";
import building from "~icons/ci/building-02";
import { ElMessageBox } from "element-plus";
import { message } from "@/utils/message";
import { tags_list } from "@/api/tag";
import {
  customer_detail,
  customer_tags,
  customer_followLogs,
  customer_dealLogs,
  customer_seaReasons,
  customer_save,
  customerLabel_add,
  customerLabel_del,
  customerFollow_add,
  customerFollow_save,
  customerFollow_del,
  customerTrade_add,
  customerTrade_save,
  customerTrade_del
} from "@/api/customer";
import { addDialog } from "@/components/ReDialog";
import { type Ref, reactive, ref, onMounted, h, toRaw, computed } from "vue";
import type { PaginationProps } from "@pureadmin/table";
// import type { EditFormItemProps } from "@/components/customerEdit/utils/types";
// import type { TagFormItemProps } from "@/components/tagAdd/utils/types";
// import type { FollowFormItemProps } from "@/components/followHandle/utils/types";
import { deviceDetection } from "@pureadmin/utils";

import { Edit, Plus, MoreFilled } from "@element-plus/icons-vue";

const emit = defineEmits(["onSearch"]);

import { useUserStoreHook } from "@/store/modules/user";

/** 页面元素权限 */
const auth_element = computed(() => {
  return useUserStoreHook()?.auth_element;
});

const permissions = reactive({
  is_callCount_calendar: false, // 日历

  is_search_name: false, // 搜索名称
  is_search_status: false, // 搜索状态

  is_single_watch: false, // 监控
  is_single_recycle: false, // 回收未接
  is_single_pause: false, // 暂停
  is_single_excute: false, // 开始
  is_single_delete: false, // 删除

  is_batch_delete: false, // 批量删除
  is_batch_recycle: false, // 批量回收未接
})

const detailInfo = ref(null);
const drawer = ref(false);
const tab = ref(1);
const isYewu = ref(false);

const sourceList = ref([
  {
    value: "exchange",
    label: "兑领"
  },
  {
    value: "third",
    label: "第三方自导入"
  }
]);

const tagList = ref([]);
const followLogList = ref([]);
const dealLogList = ref([]);
const seaReasonList = ref([]);

// 客户信息编辑
const customerEditFormRef = ref();
function customerEditClick() {
  addDialog({
    title: "客户信息编辑",
    props: {
      formInline: {
        id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        company_name: detailInfo.value.company_name,
        address_path: detailInfo.value.address_path
          ? detailInfo.value.address_path.split("/")
          : [],
        name: detailInfo.value.name,
        phone: detailInfo.value.phone,
        code: detailInfo.value.code,
        establishmenttime: detailInfo.value.establishmenttime,
        employee_size: detailInfo.value.employee_size,
        insured_num: detailInfo.value.insured_num,
        registered_capital: detailInfo.value.registered_capital,
        national_standard_industry: detailInfo.value.national_standard_industry,
        address: detailInfo.value.address,
        scope_of_experience: detailInfo.value.scope_of_experience
      }
    },
    width: "680px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () =>
      h(customerEditForm, { ref: customerEditFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = customerEditFormRef.value.getRef();
      const curData = options.props.formInline;
      function chores() {
        message(`操作成功！`, {
          type: "success"
        });
        setTimeout(() => {
          done(); // 关闭弹框
          drawer.value = false;
          emit("onSearch");
          // customer_detail({ id: detailInfo.value.id }).then(res => {
          //   detailInfo.value = res.data;
          // });
        }, 1000);
      }
      FormRef.validate(valid => {
        if (valid) {
          let curForm = JSON.parse(JSON.stringify(curData));
          if (curForm.address_path && curForm.address_path.length)
            curForm.address_path = curForm.address_path.join("/");
          else curForm.address_path = "";
          customer_save(curForm).then(res => {
            if (res.code == 1000) {
              chores();
            } else {
              message(res.msg, { type: "error" });
            }
          });
        }
      });
    }
  });
}

// 新增标签
const tagFormRef = ref();
function tagAddClick() {
  addDialog({
    title: "新增客户标签",
    props: {
      formInline: {
        id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        tags_id: ""
      }
    },
    width: "420px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(tagAddForm, { ref: tagFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = tagFormRef.value.getRef();
      const curData = options.props.formInline;
      function chores() {
        message(`操作成功！`, {
          type: "success"
        });
        setTimeout(() => {
          done(); // 关闭弹框
          customer_detail({ id: detailInfo.value.id }).then(res => {
            detailInfo.value = res.data;

            getLabelList(res.data.tag_ids);
          });
        }, 1000);
      }
      FormRef.validate(valid => {
        if (valid) {
          customerLabel_add(curData).then(res => {
            if (res.code == 1000) {
              chores();
            } else {
              message(res.msg, { type: "error" });
            }
          });
        }
      });
    }
  });
}

// 删除标签
function tagDelClick(row) {
  ElMessageBox.confirm("确定执行该操作？", "重要提示", {
    type: "warning"
  })
    .then(() => {
      customerLabel_del({
        id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        tags_id: row.tag_id
      }).then(res => {
        if (res.code == 1000) {
          message(`操作成功！`, {
            type: "success"
          });
          setTimeout(() => {
            customer_detail({ id: detailInfo.value.id }).then(res => {
              detailInfo.value = res.data;

              getLabelList(res.data.tag_ids);
            });
          }, 1000);
        } else {
          message(res.msg, { type: "error" });
        }
      });
    })
    .catch(() => {});
}

// 新增跟进记录
const followFormRef = ref();
function followLogAddClick() {
  addDialog({
    title: "新增跟进记录",
    props: {
      formInline: {
        customer_id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        content: ""
      }
    },
    width: "420px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () =>
      h(followForm, { ref: followFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = followFormRef.value.getRef();
      const curData = options.props.formInline;
      function chores() {
        message(`操作成功！`, {
          type: "success"
        });
        setTimeout(() => {
          done(); // 关闭弹框
          drawer.value = false;
          emit("onSearch");
          // customer_detail({ id: detailInfo.value.id }).then(res => {
          //   detailInfo.value = res.data;

          //   getCustomerFollowLog();
          // });
        }, 1000);
      }
      FormRef.validate(valid => {
        if (valid) {
          customerFollow_add(curData).then(res => {
            if (res.code == 1000) {
              chores();
            } else {
              message(res.msg, { type: "error" });
            }
          });
        }
      });
    }
  });
}

// 操作跟进记录
function handleFollowLogCommand(item, e) {
  if (e == "edit") followLogEdit(item);
  else if (e == "delete") followLogDetele(item);
}

// 编辑跟进记录
function followLogEdit(item) {
  addDialog({
    title: "编辑跟进记录",
    props: {
      formInline: {
        id: item.id,
        customer_id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        content: item.content
      }
    },
    width: "420px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () =>
      h(followForm, { ref: followFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = followFormRef.value.getRef();
      const curData = options.props.formInline;
      function chores() {
        message(`操作成功！`, {
          type: "success"
        });
        setTimeout(() => {
          done(); // 关闭弹框
          // drawer.value = false;
          // emit("onSearch");
          customer_detail({ id: detailInfo.value.id }).then(res => {
            detailInfo.value = res.data;

            getCustomerFollowLog();
          });
        }, 1000);
      }
      FormRef.validate(valid => {
        if (valid) {
          customerFollow_save(curData).then(res => {
            if (res.code == 1000) {
              chores();
            } else {
              message(res.msg, { type: "error" });
            }
          });
        }
      });
    }
  });
}

// 删除跟进记录
function followLogDetele(item) {
  ElMessageBox.confirm("确定执行该操作？", "重要提示", {
    type: "warning"
  })
    .then(() => {
      customerFollow_del({
        customer_id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        id: item.id
      }).then(res => {
        if (res.code == 1000) {
          message(`操作成功！`, {
            type: "success"
          });
          setTimeout(() => {
            customer_detail({ id: detailInfo.value.id }).then(res => {
              detailInfo.value = res.data;

              getCustomerFollowLog();
            });
          }, 1000);
        } else {
          message(res.msg, { type: "error" });
        }
      });
    })
    .catch(() => {});
}

// 新增成交记录
const dealFormRef = ref();
function dealLogAddClick() {
  addDialog({
    title: "新增成交记录",
    props: {
      formInline: {
        id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        product_json: [],
        price: ""
      }
    },
    width: "420px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(dealForm, { ref: dealFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = dealFormRef.value.getRef();
      const curData = options.props.formInline;
      function chores() {
        message(`操作成功！`, {
          type: "success"
        });
        setTimeout(() => {
          done(); // 关闭弹框
          drawer.value = false;
          emit("onSearch");
          // customer_detail({ id: detailInfo.value.id }).then(res => {
          //   detailInfo.value = res.data;

          //   getCustomerDealLog();
          // });
        }, 1000);
      }
      FormRef.validate(valid => {
        if (valid) {
          let curForm = JSON.parse(JSON.stringify(curData));
          curForm.product_id = curForm.product_json[1];
          curForm.product_json = curForm.product_json.join(",");
          customerTrade_add(curForm).then(res => {
            if (res.code == 1000) {
              chores();
            } else {
              message(res.msg, { type: "error" });
            }
          });
        }
      });
    }
  });
}

// 操作成交记录
function handleDealLogCommand(item, e) {
  if (e == "edit") delLogEdit(item);
  else if (e == "delete") delLogDetele(item);
}

// 编辑成交记录
function delLogEdit(item) {
  addDialog({
    title: "编辑跟进记录",
    props: {
      formInline: {
        deal_log_id: item.id,
        id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        product_json: item.product_json ? item.product_json.split(",") : [],
        price: item.price
      }
    },
    width: "420px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(dealForm, { ref: dealFormRef, formInline: null }),
    beforeSure: (done, { options }) => {
      const FormRef = dealFormRef.value.getRef();
      const curData = options.props.formInline;
      function chores() {
        message(`操作成功！`, {
          type: "success"
        });
        setTimeout(() => {
          done(); // 关闭弹框
          // drawer.value = false;
          // emit("onSearch");
          customer_detail({ id: detailInfo.value.id }).then(res => {
            detailInfo.value = res.data;

            getCustomerDealLog();
          });
        }, 1000);
      }
      FormRef.validate(valid => {
        if (valid) {
          let curForm = JSON.parse(JSON.stringify(curData));
          curForm.product_id = curForm.product_json[1];
          curForm.product_json = curForm.product_json.join(",");
          customerTrade_save(curForm).then(res => {
            if (res.code == 1000) {
              chores();
            } else {
              message(res.msg, { type: "error" });
            }
          });
        }
      });
    }
  });
}

// 删除成交记录
function delLogDetele(item) {
  ElMessageBox.confirm("确定执行该操作？", "重要提示", {
    type: "warning"
  })
    .then(() => {
      customerTrade_del({
        id: detailInfo.value.id,
        table_at: detailInfo.value.table_at,
        version: detailInfo.value.version,
        deal_log_id: item.id
      }).then(res => {
        if (res.code == 1000) {
          message(`操作成功！`, {
            type: "success"
          });
          setTimeout(() => {
            customer_detail({ id: detailInfo.value.id }).then(res => {
              detailInfo.value = res.data;

              getCustomerDealLog();
            });
          }, 1000);
        } else {
          message(res.msg, { type: "error" });
        }
      });
    })
    .catch(() => {});
}

const openDrawer = (id: string, yewu: boolean = false) => {
  tab.value = 1;
  isYewu.value = yewu;

  // /** 筛选完-页面元素权限 */
  // if (auth_element.value) {
  //   // 查询 onpage 为 "/common" 的所有数据
  //   const homeData = Object.entries(JSON.parse(auth_element.value)).filter(([key, value]) => value.onpage === "/common");
  //   // 转换为对象形式
  //   const homeDataObj: any = Object.fromEntries(homeData);
  //   console.log(homeDataObj);
  //   // callCount_calendar
  //   if (homeDataObj.callCount_calendar) permissions.is_callCount_calendar = true
  // }

  customer_detail({ id }).then(res => {
    detailInfo.value = res.data;
    drawer.value = true;

    getLabelList(res.data.tag_ids);
    getCustomerFollowLog();
    getCustomerDealLog();
    getCustomerSeaReason();
  });
};

const closeDrawer = () => {
  drawer.value = false;
};

// 获取标签列表
function getLabelList(tag_ids) {
  tags_list({
    page: 1,
    pagesize: 999,
    status: 1
  }).then(res => {
    let labelList = res.data;
    if (tag_ids) {
      let tagIds = tag_ids.split(",").map(item => item.replaceAll("_", ""));
      detailInfo.value.tag_name = tagIds.map(
        item => labelList.find(tag => tag.id === item)?.name
      );
    }

    getCustomerTag(labelList);
  });
}

// 获取客户标签
function getCustomerTag(labelList) {
  customer_tags({
    id: detailInfo.value.id,
    table_at: detailInfo.value.table_at,
    page: 1,
    size: 999
  }).then(res => {
    let tagDataList = res.data.list || [];
    for (let i = 0; i < tagDataList.length; i++) {
      tagDataList[i].name = labelList.filter(
        item => tagDataList[i].tag_id == item.id
      )[0]?.name;
    }
    tagList.value = tagDataList;
  });
}

// 获取跟进记录
function getCustomerFollowLog() {
  customer_followLogs({
    id: detailInfo.value.id,
    table_at: detailInfo.value.table_at,
    page: 1,
    size: 999
  }).then(res => {
    followLogList.value = res.data || [];
  });
}

// 获取成交记录
function getCustomerDealLog() {
  customer_dealLogs({
    id: detailInfo.value.id,
    table_at: detailInfo.value.table_at,
    page: 1,
    size: 999
  }).then(res => {
    dealLogList.value = res.data || [];
  });
}

// 获取进入公海原因
function getCustomerSeaReason() {
  customer_seaReasons({
    id: detailInfo.value.id,
    table_at: detailInfo.value.table_at,
    page: 1,
    size: 999
  }).then(res => {
    seaReasonList.value = res.data || [];
  });
}

defineExpose({ openDrawer, closeDrawer });
</script>

<template>
  <div>
    <el-drawer v-model="drawer" size="850px" :with-header="false">
      <div class="form_data">
        <div class="data_left">
          <div @click="tab = 1" :class="{ click: tab == 1 }">状态</div>
          <div @click="tab = 2" :class="{ click: tab == 2 }">客户信息</div>
          <div @click="tab = 3" :class="{ click: tab == 3 }">标签</div>
          <div @click="tab = 4" :class="{ click: tab == 4 }">跟进记录</div>
          <div @click="tab = 5" :class="{ click: tab == 5 }">成交记录</div>
          <div @click="tab = 6" :class="{ click: tab == 6 }">进公海原因</div>
        </div>

        <div class="data_right" v-if="tab == 1">
          <div class="title">客户状态</div>
          <div class="nr1">
            <div class="name">
              <p>{{ detailInfo.company_name }} / {{ detailInfo.name }}</p>
              <el-tag
                class="ic"
                type="info"
                v-if="detailInfo.intend_status == 'noconnect'"
                >未接通未确定</el-tag
              >
              <el-tag
                class="ic"
                type="info"
                v-if="detailInfo.intend_status == 'unkown'"
                >接通未确定</el-tag
              >
              <el-tag
                class="ic"
                type="info"
                v-if="detailInfo.intend_status == 'refuse'"
                >无意向</el-tag
              >
              <el-tag
                class="ic"
                type="info"
                v-if="detailInfo.intend_status == 'intend'"
                >有意向</el-tag
              >
            </div>
            <p>
              来源：{{
                sourceList.filter(item => item.value == detailInfo.source_by)[0]
                  .label
              }}
            </p>
            <p v-if="detailInfo.target_staff_name">
              当前推进人：{{ detailInfo.target_staff_name }}
            </p>
            <p v-if="detailInfo.insea_at">
              进入公海时间：{{
                dayjs.unix(detailInfo.insea_at).format("YYYY-MM-DD")
              }}
            </p>
            <p v-if="detailInfo.called_at">
              最近跟进时间：{{
                dayjs.unix(detailInfo.called_at).format("YYYY-MM-DD")
              }}
            </p>
            <div class="bq" v-if="detailInfo.tag_name">
              <p>标签：</p>
              <el-tag
                v-for="(item, index) in detailInfo.tag_name"
                :key="index"
                class="ic"
                type="info"
                size="small"
                >{{ item }}</el-tag
              >
            </div>

            <!-- 操作按钮 -->
            <slot></slot>
          </div>
        </div>

        <div class="data_right" v-if="tab == 2">
          <div class="title">
            客户信息
            <!-- 编辑按钮 -->
            <el-button
              v-if="isYewu && detailInfo.source_by !== 'exchange'"
              type="primary"
              :icon="Edit"
              @click="customerEditClick"
            >
              修改
            </el-button>
          </div>
          <div class="nr2">
            <div class="name">
              <IconifyIconOffline
                :icon="building"
                style="
                  color: #000000;
                  width: 24px;
                  height: 24px;
                  margin-right: 7px;
                "
              />
              <p>{{ detailInfo.company_name }}</p>
            </div>

            <el-descriptions class="margin-top" :column="2" border>
              <el-descriptions-item :label-width="100" label-align="center">
                <template #label
                  ><span style="font-weight: 400">法定代表人</span></template
                >
                {{ detailInfo.name }}
              </el-descriptions-item>
              <el-descriptions-item :label-width="150" label-align="center">
                <template #label
                  ><span style="font-weight: 400"
                    >社会统一信用代码</span
                  ></template
                >
                {{ detailInfo.code }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center">
                <template #label
                  ><span style="font-weight: 400">成立日期</span></template
                >
                {{ detailInfo.establishmenttime ? dayjs(detailInfo.establishmenttime).format("YYYY-MM-DD") : "" }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center">
                <template #label
                  ><span style="font-weight: 400">注册资本</span></template
                >
                {{
                  detailInfo.registered_capital
                    ? `${detailInfo.registered_capital}万元人民币`
                    : ""
                }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center">
                <template #label
                  ><span style="font-weight: 400">所属地区</span></template
                >
                {{ detailInfo.address_path }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center">
                <template #label
                  ><span style="font-weight: 400">参保人数</span></template
                >
                {{ detailInfo.insured_num }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center">
                <template #label
                  ><span style="font-weight: 400">员工规模</span></template
                >
                {{ detailInfo.employee_size }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center">
                <template #label
                  ><span style="font-weight: 400">注册地址</span></template
                >
                {{ detailInfo.address }}
              </el-descriptions-item>
              <el-descriptions-item :span="2" label-align="center">
                <template #label
                  ><span style="font-weight: 400">国标行业</span></template
                >
                {{ detailInfo.national_standard_industry }}
              </el-descriptions-item>
              <el-descriptions-item :span="2" label-align="center">
                <template #label
                  ><span style="font-weight: 400">经营范围</span></template
                >
                {{ detailInfo.scope_of_experience }}
              </el-descriptions-item>
              <el-descriptions-item :span="2" label-align="center">
                <template #label
                  ><span style="font-weight: 400">联系电话</span></template
                >
                {{ detailInfo.phone }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <div class="data_right" v-if="tab == 3">
          <div class="title">
            客户标签
            <!-- 新增 -->
            <el-button
              v-if="isYewu"
              type="primary"
              :icon="Plus"
              @click="tagAddClick"
            >
              新增
            </el-button>
          </div>
          <div class="nr3">
            <el-table
              :data="tagList"
              style="width: 100%"
              height="calc(100vh - 112px)"
              :border="true"
            >
              <el-table-column label="标签名称">
                <template #default="scope">
                  <el-tag>{{ scope.row.name }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="标记时间">
                <template #default="scope">
                  <el-tag>{{
                    dayjs.unix(scope.row.created_at).format("YYYY-MM-DD")
                  }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="120"
                v-if="isYewu"
              >
                <template #default="scope">
                  <el-button
                    size="small"
                    type="primary"
                    @click="tagDelClick(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>

              <template #empty>
                <el-empty description="暂无数据" />
              </template>
            </el-table>
          </div>
        </div>

        <div class="data_right" v-if="tab == 4">
          <div class="title">
            客户跟进记录
            <!-- 新增 -->
            <el-button
              v-if="isYewu"
              type="primary"
              :icon="Plus"
              @click="followLogAddClick"
            >
              新增
            </el-button>
          </div>
          <div class="nr4">
            <el-scrollbar height="calc(100vh - 112px)">
              <div
                class="box"
                v-for="(item, index) in followLogList"
                :key="index"
              >
                <div class="dian"></div>
                <div class="right">
                  <div class="time">
                    {{ dayjs.unix(item.created_at).format("YYYY-MM-DD") }}
                  </div>
                  <div class="text" style="position: relative">
                    <div class="name">
                      跟进人：<span>{{ item.nickname }}</span>
                    </div>
                    <div class="name">
                      跟进内容：<span>{{ item.content }}</span>
                    </div>

                    <el-dropdown
                      v-if="isYewu"
                      trigger="click"
                      style="position: absolute; right: 10px; top: 6px"
                      @command="handleFollowLogCommand(item, $event)"
                    >
                      <el-button type="primary" size="small" link>
                        <el-icon
                          style="cursor: pointer"
                          color="#222222"
                          size="16"
                          ><MoreFilled
                        /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item command="edit"
                            >编辑</el-dropdown-item
                          >
                          <el-dropdown-item command="delete"
                            >删除</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              <div class="nodata" v-if="!followLogList.length">
                <el-empty description="暂无数据" />
              </div>
            </el-scrollbar>
          </div>
        </div>

        <div class="data_right" v-if="tab == 5">
          <div class="title">
            客户成交记录
            <!-- 新增 -->
            <el-button
              v-if="isYewu"
              type="primary"
              :icon="Plus"
              @click="dealLogAddClick"
            >
              新增
            </el-button>
          </div>
          <div class="nr4">
            <el-scrollbar height="calc(100vh - 112px)">
              <div
                class="box"
                v-for="(item, index) in dealLogList"
                :key="index"
              >
                <div class="dian"></div>
                <div class="right">
                  <div class="time">
                    {{ dayjs.unix(item.created_at).format("YYYY-MM-DD") }}
                  </div>
                  <div class="text" style="position: relative">
                    <div class="name">
                      跟进人：<span>{{ item.nickname }}</span>
                    </div>
                    <div class="name">
                      {{ item.product_name }}<span class="money">金额：</span
                      ><span class="money_num">￥{{ item.price }}</span>
                    </div>

                    <el-dropdown
                      v-if="isYewu"
                      trigger="click"
                      style="position: absolute; right: 10px; top: 6px"
                      @command="handleDealLogCommand(item, $event)"
                    >
                      <el-button type="primary" size="small" link>
                        <el-icon
                          style="cursor: pointer"
                          color="#222222"
                          size="16"
                          ><MoreFilled
                        /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item command="edit"
                            >编辑</el-dropdown-item
                          >
                          <el-dropdown-item command="delete"
                            >删除</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              <div class="nodata" v-if="!dealLogList.length">
                <el-empty description="暂无数据" />
              </div>
            </el-scrollbar>
          </div>
        </div>

        <div class="data_right" v-if="tab == 6">
          <div class="title">进公海原因</div>
          <div class="nr4">
            <el-scrollbar height="calc(100vh - 112px)">
              <div
                class="box"
                v-for="(item, index) in seaReasonList"
                :key="index"
              >
                <div class="dian"></div>
                <div class="right">
                  <div class="time">
                    {{ dayjs.unix(item.created_at).format("YYYY-MM-DD") }}
                  </div>
                  <div class="text">
                    <div class="name">
                      跟进人：<span>{{ item.nickname }}</span>
                    </div>
                    <div class="name">
                      跟进内容：<span class="money_num">{{
                        item.content
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="nodata" v-if="!seaReasonList.length">
                <el-empty description="暂无数据" />
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-drawer__body) {
  background-color: #f3f6f9;
  padding: var(--el-drawer-padding-primary) !important;
}
// :deep(.el-icon svg){
//   width: .7em;
//   height: .7em;
//   background-color: #f3f6f9;
// }
:deep(.el-step__icon-inner[class*="el-icon"]:not(.is-status)) {
  display: flex;
}
// :deep(.el-icon){
//   width: .7em;
//   height: .7em;
// }

.form_data {
  display: flex;
  align-items: flex-start;
  .data_left {
    position: relative;
    z-index: 1;
    div {
      width: 90px;
      height: 36px;
      background-color: #e5e5e5;
      font-size: 14px;
      color: #000;
      line-height: 36px;
      text-align: center;
      margin-bottom: 15px;
      cursor: pointer;
      border-radius: 5px;
      position: relative;
    }
    div::after {
      width: 9px;
      height: 9px;
      position: absolute;
      content: "";
      background-color: #e5e5e5;
      transform: translateY(-50%);
      top: 50%;
      right: -21px;
      border-radius: 50px;
    }
    .click {
      background-color: var(--pure-theme-menu-active-before);
      color: #fff;
    }
    .click::after {
      background-color: var(--pure-theme-menu-active-before);
    }
  }
  .data_left::after {
    width: 1px;
    height: 260px;
    position: absolute;
    content: "";
    background-color: #e5e5e5;
    top: 15px;
    right: -17px;
    z-index: -1;
  }
  .data_right {
    flex: 1;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 34px;
    box-shadow: 0 0 3px #dedede;
    padding: 15px;

    .title {
      font-size: 18px;
      color: #000;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 32px;
    }
    .nr1 {
      .name {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        p {
          font-size: 17px;
          color: #333;
          font-weight: bold;
          margin-right: 20px;
        }
        .ic {
          margin-right: 7px;
        }
      }
      > p {
        font-size: 14px;
        color: #444;
        line-height: 26px;
      }
      .bq {
        display: flex;
        align-items: center;
        margin-top: 5px;
        p {
          font-size: 14px;
          color: #444;
        }
        .ic {
          margin-right: 5px;
        }
      }

      .del {
        margin-top: 30px;
      }
    }

    .nr2 {
      .name {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        p {
          font-size: 17px;
          color: #333;
          font-weight: bold;
          margin-right: 20px;
        }
      }
    }

    .nr3 {
      background-color: #f3f6f9;
      margin-top: 10px;
    }
    .nr4 {
      margin-top: 10px;
      .box {
        display: flex;
        padding-bottom: 20px;
        position: relative;
        z-index: 1;
        .dian {
          width: 11px;
          height: 11px;
          background-color: #cccccc;
          border-radius: 50%;
          margin-right: 10px;
          margin-top: 5px;
        }
        .right {
          flex: 1;
          .time {
            font-size: 14px;
            color: #444;
          }
          .text {
            background-color: #f3f6f9;
            padding: 15px;
            border-radius: 7px;
            margin-top: 7px;
            .name {
              font-size: 14px;
              color: #333;
              span {
                font-size: 14px;
                color: #666;
              }
              .money {
                font-size: 14px;
                color: #333;
                margin-left: 25px;
              }
              .money_num {
                color: #eb8d00;
              }
            }
            .name:nth-child(1) {
              margin-bottom: 8px;
            }
          }
        }
      }
      .box::after {
        width: 1px;
        height: calc(100% - 9px);
        background-color: #cccccc;
        content: "";
        position: absolute;
        left: 5px;
        top: 14px;
        z-index: -1;
      }
      .box:last-child {
        padding-bottom: 0px;
      }
      .box:last-child::after {
        display: none;
      }
      .box:nth-child(1) {
        .dian {
          background-color: var(--pure-theme-menu-active-before);
        }
      }
    }
    .nodata {
      font-size: 14px;
      color: #999;
      text-align: center;
      padding-top: 12px;
    }
  }
}
</style>
